<template>
	<div class="modal" v-show="show" transition="fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<!-- Header -->
				<div class="modal-header">
					<button class="close" v-on:click="dismiss"><span>&times;</span></button>
					<p class="header-title">注册</p>
				</div>
				<!-- Body -->
				<div class="modal-body" v-on:keyup.enter="signUp">
					<div>
						<input class="inputbox" v-model="username" type="text" placeholder="用户名只能包含数字，字母以及下划线">
					</div>
					<div>
						<input class="inputbox" v-model="password" type="password" placeholder="输入密码">
					</div>
					<div>
						<input class="inputbox" v-model="confirmPassword" type="password" placeholder="再次输入密码">
					</div>
					<div>
						<p v-if="errorMessage">{{ errorMessage }}</p>
					</div>
					<button v-on:click="signUp" class="btn">注册</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {bus} from '../main.js'

export default {
	name: 'signupmodal',
	data() {
		return {
			username: '',
			password: '',
			confirmPassword: '',
			errorMessage: null,
			show: false
		}
	},
	methods: {
		signUp: function(){
			if(this.password != this.confirmPassword){
				this.errorMessage = '密码不匹配！'
				return
			}
			this.errorMessage = window.delegate.createUser(this.username, this.password)
			if(!this.errorMessage){
				bus.$emit('signin_success')
				this.show = false
			}
		},
		dismiss: function(){
			//this.$emit('signup_cancel')
			this.show = false
		}
	},
	mounted: function(){
		bus.$on('show_signup_modal', function(){
			this.show = true
		}.bind(this))
	}
}
</script>

<style scoped>
.modal {
	background-color: rgba(133,133,133,0.3);
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	outline: 0;
	z-index: 1001;
	opacity: 1;
	box-sizing: border-box;
}

.modal-dialog {
	margin: 200px auto;
	position: relative;
	width: 400px;
}

.modal-header{
	padding: 0px;
	border-bottom-color: rgba(1,1,1,0.2);
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.modal-content{
	background-color: white;
	border-radius: 6px;
	border: 1px solid gray;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px 0px;
}

.modal-body{
	padding-top: 20px;
	padding-bottom: 10px;
}

.btn{
	height: 35px;
	width: 330px;
	border: 2px solid darkblue;
	border-radius: 5px;
}

.inputbox{
	height: 30px;
	width: 320px;
	border: 2px solid darkred;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 5px;
	padding-left: 5px;
	font-size: 16px;
}

.header-title{
	color: black;
	top: -5px;
}

.close{
	float: right;
	font-size: 21px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-weight: bold;
	line-height: 1;
	opacity: .5;
	position: relative;
	top: 8px;
	right: 5px;
}
</style>